<template>
</template>

<script>
    import {getErrorMessage} from "../LaravelErrorTranslateSample";

    export default {
        data:() => ({
            addCate: false,
            selectCategories: [],
            categories: [],
            categoryMsg: '',
            addCategoryParentId: 0,
            addCategoryParentTitle: '选择上一级',
            addCategoryTitle: null,
            messageTimer: null,
            createType: 'version',
            action: null,
            isUpdate: false,
        }),
        mounted() {

            console.log('Component mounted.', window.categories)
        },
        watch: {
            selectCategories(newArray) {
                console.log(newArray);
            }
        },
        methods: {
            showAddCategory() {
                if (!this.addCate && this.selectCategories.length >= 5) {

                    this.showCategoryErrorMsg('无法添加标签，标签最多只能选择 5 个');
                    return;
                }
                this.addCate = !this.addCate;
            },
            addCategory() {
                // 判断一下 选中的标签不能超过 5 个
                if (this.selectCategories.length >= 5) {

                    this.showCategoryErrorMsg('无法添加标签，标签最多只能选择 5 个');
                    return;
                }
                axios.post('/categories', {
                    title: this.addCategoryTitle,
                    category_id: this.addCategoryParentId,
                }).then((response) => {
                    // 标记为选中
                    let category = response.data;
                    category.check = true;
                    // 获得是在哪个 顶级分类里
                    let parentIndex = _.findIndex(this.categories, (i) => i.id === this.addCategoryParentId);
                    this.categories[parentIndex].children.push(category);
                    this.selectCategories.push(category.id);
                }).catch((error) => {
                    this.showCategoryErrorMsg(getErrorMessage(error));
                })
            },
            checkCategory(index, i, id) {
                let category = this.categories[index]['children'][i];
                category.check = !category.check;
                if (category.check) {
                    // 判断是否超过 5 个
                    if (this.selectCategories.length >= 5) {
                        category.check = false;
                        this.showCategoryErrorMsg('标签最多只能选择 5 个');
                        return;
                    }
                    this.selectCategories.push(category.id)
                } else {
                    _.remove(this.selectCategories, (ii) => ii === category.id)
                }
                this.$set(this.categories[index]['children'][i], category);
            },
            selectAddCategoryParentId(id, title) {
                this.addCategoryParentId = id;
                this.addCategoryParentTitle = title;
            },
            showCategoryErrorMsg(msg) {
                if (this.messageTimer) {
                    clearTimeout(this.messageTimer);
                }
                this.categoryMsg = null;
                this.categoryMsg = msg;
                this.messageTimer = setTimeout(() => {
                    this.categoryMsg = null;
                    this.messageTimer = null;
                }, 3000);
            },
            saveAsDraft() {
                this.createType = 'draft';
            },
            submitType(type = 'create') {
                if (type === 'update') {
                    this.action = update_action;
                    this.isUpdate = true;
                } else {
                    this.action = create_action;
                    this.isUpdate = false;
                }
            }
        },
        created() {
            let initCategories = [];
            categories.forEach((category, index) => {
                category.children.forEach((cate, i) => {
                    let isCheck = _.indexOf(selectCategories, cate.id);
                    if(isCheck <= -1) {
                        cate.check = false;
                    } else {
                        cate.check = true;
                        this.selectCategories.push(cate.id)
                    }
                    category.children[i] = cate;
                })
                initCategories.push(category);
            })
            this.categories = initCategories;
            this.action = create_action;
            console.log('新版本地址', create_action);
            console.log('合并地址', update_action);
        }
    }
</script>
